﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui.css-H.js</title>
    <link rel="stylesheet" type="text/css" href="../../../css/Hui.css" />
    <style type="text/css">
    </style>
</head>
<body class="H-flexbox-vertical">
    <header class="H-header H-theme9-bg" id="header">
        <span class="H-icon H-float-left" tapmode="" onclick="H.closeWin();"><i class="Hui-iconfont Hui-fanhui"></i></span>
        <div class="H-header-title">
            聊天组件
        </div>
    </header>
    <script type="text/javascript" src="../../../script/H.js"></script>
    <script type="text/javascript">
        // 重置frame高度
        function resetFrameHeight(inputBarHeight, panelHeight) {
            H.fixStatusBar(function (offset) {
                H.setFrameAttr("chat_msg_body", false, {
                    rect: {
                        h: H.winHeight - offset.h - inputBarHeight - panelHeight
                    }
                });
            }, '#header');
            setTimeout(function () {
                // 滚动到底部
                H.execScript("chat_msg_head", "chat_msg_body", "Hui.scrollToDocButton();");
            }, 200);
        }
        H.ready(function () {
            // 载入模块
            H.require("UIChatBox");
            // 打开frame
            H.fixStatusBar(function (offset) {
                H.openFrame("chat_msg_body", "chat_msg_body.html", null, {
                    rect: {
                        y: offset.h,
                        h: H.winHeight - offset.h - (H.systemType == "ios" ? 50 : 34)
                    }
                });
            }, "#header");
            // UIChatbox
            // ####################### 聊天组件
            H.M.UIChatBox.open({
                placeholder: '',
                maxRows: 4,
                emotionPath: 'widget://res/chatBox/emotion',
                texts: {
                    recordBtn: {
                        normalTitle: '按住 说话',
                        activeTitle: '松开 结束'
                    },
                    sendBtn: {
                        title: "发送"
                    }
                },
                styles: {
                    inputBar: {
                        borderColor: '#d9d9d9',
                        bgColor: '#f2f2f2'
                    },
                    inputBox: {
                        borderColor: '#B3B3B3',
                        bgColor: '#FFFFFF'
                    },
                    emotionBtn: {
                        normalImg: 'widget://res/chatBox/chatBox_face1.png'
                    },
                    extrasBtn: {
                        normalImg: 'widget://res/chatBox/chatBox_add1.png'
                    },
                    keyboardBtn: {
                        normalImg: 'widget://res/chatBox/chatBox_key1.png'
                    },
                    speechBtn: {
                        normalImg: 'widget://res/chatBox/chatBox_key1.png'
                    },
                    recordBtn: {
                        normalBg: '#ccc',
                        activeBg: '#999999',
                        color: '#000',
                        size: 14
                    },
                    indicator: {
                        target: 'both',
                        color: '#c4c4c4',
                        activeColor: '#9e9e9e'
                    },
                    sendBtn: {
                        titleColor: '#fff',
                        bg: '#11b6f4',
                        activeBg: '#039fd9',
                        titleSize: 14
                    }
                },
                extras: {
                    titleSize: 14,
                    titleColor: '#000000',
                    btns: [{
                        title: '图片',
                        normalImg: 'widget://res/chatBox/chatBox_album1.png',
                        activeImg: 'widget://res/chatBox/chatBox_album2.png'
                    }, {
                        title: '拍照',
                        normalImg: 'widget://res/chatBox/chatBox_cam1.png',
                        activeImg: 'widget://res/chatBox/chatBox_cam2.png'
                    }]
                }
            }, function (ret, err) {
                if (ret) {
                    // 滚动到底部
                    H.execScript("chat_msg_head", "chat_msg_body", "Hui.scrollToDocButton();");
                } else {
                }
            });
            // 监听输入框的变化，动态调整frame高度
            //1.0 输入框所在区域弹动事件
            H.M.UIChatBox.addEventListener({
                target: 'inputBar',
                name: 'move'
            }, function (ret, err) {
                if (ret) {
                    //输入框及左右按钮整体区域的高度
                    var inputBarHeight = ret.inputBarHeight;
                    // 输入框下边缘距离屏幕底部的高度
                    var panelHeight = ret.panelHeight;
                    resetFrameHeight(inputBarHeight, panelHeight);
                }
            });
            //2.0 输入框所在区域高度改变
            H.M.UIChatBox.addEventListener({
                target: 'inputBar',
                name: 'change'
            }, function (ret, err) {
                if (ret) {
                    //输入框及左右按钮整体区域的高度
                    var inputBarHeight = ret.inputBarHeight;
                    // 输入框下边缘距离屏幕底部的高度
                    var panelHeight = ret.panelHeight;
                    resetFrameHeight(inputBarHeight, panelHeight);
                }
            });
        });
    </script>
</body>
</html>